﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
A tree view control using recursive templates
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>A tree view control using recursive templates</title>
	<link href="resources/treeView.css" rel="stylesheet" type="text/css" />
</head>
<body>

<h1>Tree View</h1>

<div><ul id="samplesList" class="treeView"><li>Loading...</li></ul></div>

<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../../jquery.tmpl.js" type="text/javascript"></script>

<script id="folderTmpl" type="text/x-jquery-tmpl">
	<li class="content_${hasContent($item)}">
		<img class="expand" src="resources/${expanderImage()}.png" />
		<img class="folder" src="resources/folder.png" />
		<span>${name}</span>
	</li>
	{{if expanded}}
		<li>
			<ul>{{tmpl(getSamples($item)) "#itemTmpl"}}</ul>
			<ul>{{tmpl(getFolders($item)) "#folderTmpl"}}</ul>
		</li>
	{{/if}}
</script>

<script id="itemTmpl" type="text/x-jquery-tmpl">
	<li class="folderItem">${name}</li>
</script>

<script type="text/javascript">

	// ******************** Data for folders hierarchy, and samples ********************

	var folders = {
		name: "Samples",
		folders: [
			{ name: "API", folders: [
				{ name: ".tmpl"},
				{ name: ".tmplItem" }
			]},
			{ name: "Template markup", folders: [
				{ name: "Tags", folders: [
					{ name: "tmpl"},
					{ name: "if" },
					{ name: "each" }
				]},
			]},
		]
	};

	var samples = [
		{ name: "Template in script block",
			folders: [ ".tmpl" ],
			description: "Rendering a template declared in script block" },
		{ name: "Template as string",
			folders: [ ".tmpl" ],
			description:"Rendering a template passed as a string" },
		{ name: "Render remote data",
			folders: [ "API" ],
			description: "Rendering remote data using templates" },
		{ name: "Tree View",
			folders: [ "tmpl", ".tmpl" ],
			description: "A tree view using recursive nested templates" }
	];

	// ******************** Load UI ********************

	$( "#samplesList" ).empty();
	$( "#folderTmpl" ).tmpl( folders ).appendTo( "#samplesList" );

	// ******************** Events ********************

	$( "#samplesList" )
		.delegate( ".content_true", "click", function() {
			// Get the 'template item' for this folder
			var fldrTmplItem = $.tmplItem( this );

			// Toggle expanded property on data
			fldrTmplItem.data.expanded = !fldrTmplItem.data.expanded;

			// Update the template item
			fldrTmplItem.update();
		})
		.delegate( ".folderItem", "click", function() {
			// Get the 'template item' for this folder item
			var dataItem = $.tmplItem( this ).data;
			alert( dataItem.description );
		});

	// ******************** Helper functions ********************

	function getSamples( folderTmplItem ) {
		return $.map( samples, function( sample ) {
			return $.inArray( folderTmplItem.data.name, sample.folders ) > -1 ? sample : null;
		});
	}

	function getFolders( folderTmplItem ) {
		return folderTmplItem.data.folders || [];
	}

	function expanderImage() {
		if ( hasContent( this ) ) {
			return this.data.expanded ? "expanded" : "collapsed";
		}
		return "empty"
	}

	function hasContent( folderTmplItem ) {
		return getFolders( folderTmplItem ).length > 0 || getSamples( folderTmplItem ).length > 0;
	}

</script>

</body>
</html>
